/*
 * @Descripttion: 
 * @version: 
 * @Author: 侯勇
 * @Date: 2022-10-22 18:16:53
 * @LastEditors: 侯勇
 * @LastEditTime: 2022-10-25 22:18:17
 */
import React, { memo } from 'react'
import { headerLinks } from '@/common/local-data.js'

import { NavLink } from 'react-router-dom'
import { Input } from 'antd'
import { SearchOutlined } from "@ant-design/icons"

//导入组件:防止组件发生冲突
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style'


/* 业务操作 */
const showSelect = (item, index) => {
    console.log('item,index', item, index)
    if (index < 3) {
        return (
            <NavLink to={item.link} exact>
                {item.title}
                <i className="sprite_01 icon"></i>
            </NavLink>
        )
    } else {
        return (
            <a href={item.link}>{item.title}</a>
        )
    }
}

const HyAppHeader = memo(() => {
    return (
        <HeaderWrapper >
            <div className='content wrap-v1'>
                {/* 左 */}
                <HeaderLeft>
                    {/* 不让文本展示text-indent:-9999px */}
                    <a href='#/' className='logo sprite_01' >网易云音乐 </a>
                    <div className='select-list'>
                        {
                            headerLinks.map((item, index) => {
                                return (
                                    <div key={item.title} className="select-item">
                                        {showSelect(item, index)}
                                    </div>
                                )
                            })
                        }
                    </div>
                </HeaderLeft>
                {/* 右:三部分 */}
                <HeaderRight>
                    <Input placeholder='音乐/视频/电台' prefix={<SearchOutlined />} className="search" />
                    <div className='center'>创作者中心</div>
                    <div>登录</div>
                </HeaderRight>
            </div>
            <div className='contentLine'></div>
            {/* <NavLink to="/">发现音乐</NavLink>
            <NavLink to="/mine">我的音乐</NavLink>
            <NavLink to="/friend">朋友音乐</NavLink> */}
        </HeaderWrapper>

    )
})

export default HyAppHeader